<template>
  <div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="活动详情" name="1">
          <div class="h">基本信息：</div>
          <div class="msg">
            <div>
              <span>活动编号：</span>
              <span>{{ list.atyId }}</span>
            </div>
            <div>
              <span>活动名称：</span>
              <span>{{ list.atyName }}</span>
            </div>
            <div>
              <span>活动类型：</span>
              <span>{{ list.atyType }}</span>
            </div>
            <div>
              <span>价格类型：</span>
              <span>{{ list.priceType }}</span>
            </div>
            <div>
              <span>活动价格：</span>
              <span>{{ list.atyPrice }}</span>
            </div>
            <div>
              <span>是否用户投票：</span>
              <span>{{ list.whetherVote }}</span>
            </div>
            <div>
              <span>作品投票最大数/人：</span>
              <span>{{ list.worksMaxVote }}</span>
            </div>
            <div>
              <span>用户投票最大数/天：</span>
              <span>{{ list.userMaxVote }}</span>
            </div>

            <div>
              <span>评委人数：</span>
              <span>{{ list.judgesNumber }}</span>
            </div>
            <div>
              <span>上传作品类型：</span>
              <span>{{ list.worksType }}</span>
            </div>
            <div>
              <span>是否设置钻石抵扣：</span>
              <span>{{ list.whetherDeduction }}</span>
            </div>
            <div>
              <span>钻石抵扣数：</span>
              <span>{{ list.deductionNumber }}</span>
            </div>
            <div>
              <span>抵扣金额：</span>
              <span>{{ list.deductionNumber / 100 }}</span>
            </div>
            <div>
              <span>是否填写报名信息：</span>
              <span>{{ list.whetherInfo }}</span>
            </div>
            <div>
              <span>用户字段：</span>
              <span> {{ list.userField }}</span>
            </div>
            <div>
              <span>参与人数：</span>
              <span>{{ list.enrollNumber }}</span>
            </div>
            <div>
              <span>活动进度：</span>
              <span>{{ list.atyState }}</span>
            </div>
            <div>
              <span>报名时间：</span>
              <span>{{
                `${list.enrollStartTime}--${list.enrollEndTime}`
              }}</span>
            </div>
            <div>
              <span>活动时间：</span>
              <span>{{ `${list.atyStartTime}--${list.atyEndTime}` }}</span>
            </div>
            <div>
              <span>状态：</span>
              <span>{{ list.state }}</span>
            </div>
          </div>
          <div class="h">活动封面：</div>
          <div class="img">
            <img :src="list.cover" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
          </div>
          <!-- 简介 -->
          <div class="h">活动规则</div>
          <p class="row">
            {{ list.intro }}
          </p>
          <div class="h">活动奖励</div>
          <p>活动参赛奖励：</p>
          <p>第一名：</p>
          <p>第二名：</p>
          <div class="h">参与方式</div>
          <p>参与，，，，，，，，，，，，，</p>
        </el-tab-pane>
    <el-tab-pane label="评委打分" name="2">
                  
<div>
              <el-table
                ref="multipleTable"
                :data="tableData8"
                tooltip-effect="dark"
                style="width: 100%"
                border
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="aeId" label="报名编号" align="center">
                </el-table-column>
                <el-table-column
                  prop="awName"
                  label="作品名称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="作者昵称"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
               
                <el-table-column
                  prop="score"
                  label="评委打分"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                
                 <el-table-column
                  prop=""
                  label="操作"
                  align="center"
                  show-overflow-tooltip
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-link type="primary" @click="bj(scope.row)"
                      >打分</el-link
                    >
                  </template>
                </el-table-column>

              </el-table>
              <!-- 分页 -->
              <Page
                :total="total"
                :pageNumber.sync="pageNumber"
                :pageSize.sync="pageSize"
                @current-change="changeCurrentPage"
                @size-change="handleSizeChange"
              >
              </Page>
              </div>
    </el-tab-pane>
    
  </el-tabs>
  </div>
</template>

<script>
import apis from "../../apis/modules/activityList";
import Page from "../../components/page.vue";
 export default {
         components: {
    Page,
  },
    data() {
      return {
            pageNumber: 1,
      pageSize: 10,
      total: null,
        activeName: '1',
        list: {},
        tableData8:[],
              atyId: this.$route.params.atyId,
      atyPrice: this.$route.params.atyPrice,
      };
    },
    mounted(){
this.getScoreActivityWorks({
    atyId:"2",
    pageNumber:this.pageNumber,
    pageSize:this.pageSize
}),
this.activeDeail({ atyId: this.atyId });
    },
    methods: {
          //详情
    async activeDeail(data) {
  
      await apis.activeDeail(data).then((res) => {
          console.log(res);
        if (res.code == 200) {
          this.list = res.data;
          const list = this.list;
          console.log(list);

          switch (list.atyState) {
            case "1":
              list.atyState = "预热中";
              break;
            case "2":
              list.atyState = "报名中";
              break;
            case "3":
              list.atyState = "进行中";
              break;
            case "4":
              list.atyState = "已结束";
              break;

            default:
              break;
          }
          switch (list.atyType) {
            case "1":
              list.atyType = "线上活动";
              break;

            default:
              break;
          }
          switch (list.atyType) {
            case "1":
              list.atyType = "线上活动";
              break;
            case "2":
              list.atyType = "线下活动";
              break;

            default:
              break;
          }
          switch (list.priceType) {
            case "1":
              list.priceType = "付费";
              break;
            case "2":
              list.priceType = "免费";
              break;

            default:
              break;
          }
          switch (list.state) {
            case "1":
              list.state = "上架";
              break;
            case "2":
              list.state = "下架";
              break;

            default:
              break;
          }
          switch (list.whetherDeduction) {
            case "1":
              list.whetherDeduction = "是";
              break;
            case "2":
              list.whetherDeduction = "否";
              break;

            default:
              break;
          }
          switch (list.whetherGrade) {
            case "1":
              list.whetherGrade = "是";
              break;
            case "2":
              list.whetherGrade = "否";
              break;

            default:
              break;
          }
          switch (list.whetherInfo) {
            case "1":
              list.whetherInfo = "是";
              break;
            case "2":
              list.whetherInfo = "否";
              break;

            default:
              break;
          }
          switch (list.whetherLive) {
            case "1":
              list.whetherLive = "是";
              break;
            case "2":
              list.whetherLive = "否";
              break;

            default:
              break;
          }
          switch (list.whetherVote) {
            case "1":
              list.whetherVote = "是";
              break;
            case "2":
              list.whetherVote = "否";
              break;

            default:
              break;
          }
          switch (list.worksType) {
            case "1":
              list.worksType = "是";
              break;
            case "2":
              list.worksType = "否";
              break;

            default:
              break;
          }
        }
    
      });
    },
        //评委打分
async getScoreActivityWorks(data){
await apis.getScoreActivityWorks(data).then(res=>{
    console.log(res);
})
},
 

      handleClick(tab, event) {
        console.log(tab, event);
      },
       changeCurrentPage(val) {
     
    },
    handleSizeChange(val) {
    
    },
    }
  };
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  font-size: 14px;
}
.msg {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 14px;
  div {
    width: 300px;
    height: 40px;
  }
}
.img {
  img {
    width: 300px;
    height: 300px;
    background-color: #ccc;
    margin-right: 20px;
  }
}
.h {
  font-size: 16px;
  margin: 20px 0;
}
p {
  font-size: 14px;
  color: #ccc;
}
.price {
  display: flex;
  margin-top: 40px;
  h3 {
    margin-left: 40px;
  }
}
.btn{
  display: flex;
  justify-content: space-between;
  .el-button{
    width: 120px;
  }
}
.el-input {
    width: 300px;
  }
</style>